<template>
    <div class="echarts_box">
        <div class="one_box">
            <div id="one_barBox" ref="one_bar"></div>
            <div id="one_pieBox" ref="one_pie"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, markRaw } from 'vue'
import * as echarts from "echarts";
let one_bar = ref();//绑定dom节点
let oneBarCharts = ref(null)//获取到图表的节点给oneBarCharts.value,后续操作使用
let one_pie = ref();//绑定dom节点
let onePieCharts = ref(null)//获取到图表的节点给oneBarCharts.value,后续操作使用
//柱状图
const initOneBar = () => {
    if (one_bar.value) {
        oneBarCharts.value = markRaw(echarts.init(one_bar.value))
        // console.log("oneBarCharts.value==", oneBarCharts.value);
        oneBarCharts.value.setOption(optionsOneBar());
        window.addEventListener("resize", () => {
            oneBarCharts.value.resize();
        });
    }
}
const optionsOneBar = () => {
    let xaxisData = ['合肥', '蚌埠', '芜湖', '淮南', '马鞍山', '安庆', '宿州', '阜阳', '亳州', '黄山', '滁州', '淮北', '铜陵', '宣城', '六安', '池州']
    let yaxisData = [28, 55, 45, 23, 14, 85, 45, 23, 40, 50, 84, 23, 42, 62, 35, 45]
    const offsetX = 10;
    const offsetY = 5;
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx
                .moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath();
        },
    });

    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        },
    });

    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        },
    });

    // 注册三个面图形
    echarts.graphic.registerShape("CubeLeft", CubeLeft);
    echarts.graphic.registerShape("CubeRight", CubeRight);
    echarts.graphic.registerShape("CubeTop", CubeTop);
    let option = {

        // backgroundColor: "#1146cc",
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            // backgroundColor: "rgba(255,255,255,0.75)",
            extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
            textStyle: {
                fontSize: 14,
                color: "#000",
            },
            formatter: (params, ticket, callback) => {
                const item = params[1];
                return item.name + " : " + item.value + " 个";
            },
        },
        legend: {
            icon: 'circle',
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 15,
            data: ['整改率'],
            right: '1%',
            textStyle: {
                fontSize: 14,
                color: '#424242'
            }
        },
        grid: {
            left: "3%",
            right: "3%",
            bottom: "3%",
            top: "15%",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xaxisData,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#545454'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                // fontSize: 16,
                // color: '#000',//x轴字体颜色
            }
        },
        yAxis: {
            type: 'value',
            nameTextStyle: {
                color: '#fff',
                fontWeight: 400,
                fontSize: 14
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: '#545454'
                }
            },
            splitLine: {
                show: true,
                // lineStyle: {
                //     type: 'dashed',//线的类型 虚线0
                //     opacity: 0.9//透明度
                // },
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                // fontSize: 16,
                // color: '#000',//y轴字体颜色
                formatter: '{value}%',
            },
        },
        dataZoom: [
            {
                type: "slider",
                realtime: true,
                start: 0,
                // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                startValue: 0,// 从头开始。
                endValue: 8, // 最多5个
                // minValueSpan: 5,  // 放大到最少几个
                // maxValueSpan: 5,  //  缩小到最多几个
                height: 10, //组件高度
                left: '25%', //左边的距离
                right: '25%', //右边的距离
                bottom: '5%', //下边的距离
                show: true,  // 是否展示
                fillerColor: "#0D3772", // 滚动条颜色
                borderColor: "#0D3772",
                handleSize: 0, // 两边手柄尺寸
                showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                zoomLock: true,         //是否只平移不缩放
                moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放

                top: "98.5%",
                moveHandleStyle: {
                    color: "#0d3772",
                },
            },
            {
                type: "inside", // 支持内部鼠标滚动平移
                start: 0,
                startValue: 0,// 从头开始。
                endValue: 8,// 最多5个
                zoomOnMouseWheel: false, // 关闭滚轮缩放
                moveOnMouseWheel: true, // 开启滚轮平移
                moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
            },
        ],
        series: [
            {
                type: "custom",
                name: '整改率',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: 'rgba(4,157,253,1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(214,238,253,0.9)'
                                        }
                                    ]),
                                },
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: 'rgba(4,157,253,1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(214,238,253,0.9)'
                                        }
                                    ]),
                                },
                            },
                            {
                                type: "CubeTop",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: 'rgba(4,157,253,1)'
                                },
                            },
                        ],
                    };
                },
                data: yaxisData,
            },
            {
                type: "bar",
                itemStyle: {
                    color: "transparent",
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        // fontSize: 16,
                        color: '#000',
                        offset: [0, -5],
                    },
                },
                data: yaxisData,
            },
        ],
    };
    return option;
}
//饼图
const initOnePie = () => {
    if (one_pie.value) {
        onePieCharts.value = markRaw(echarts.init(one_pie.value))
        console.log("onePieCharts.value==", onePieCharts.value);
        onePieCharts.value.setOption(optionsOnePie());
        window.addEventListener("resize", () => {
            onePieCharts.value.resize();
        });
    }
}
//获取接口数据
const optionsOnePie = () => {
    let pieData = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
    ]
    let option = {

        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: pieData
            }
        ]
    };
    return option;
}
onMounted(() => {
    initOneBar();
    initOnePie();
})
</script>
<style scoped>
.echarts_box {
    width: 100%;
    height: 100vh;
    border: 1px solid red;
    box-sizing: border-box;
}

.one_box {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-around;
}

.one_box>div {
    width: 48%;
    height: 100%;
    border: 1px solid springgreen;
}
</style>